<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>欢迎光临分享式民宿酒店平台</title>
    <!-- 引入bootstrap样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="css/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="js/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="js/bootstrap-table-zh-CN.min.js"></script>

    <style type="text/css">
      header{ 
        height: 65px; 
        background: rgba(247,235,175,1); 
      } 
      header span{ 
        line-height: 65px; 
        font-size:22px; 
        font-weight: bolder; 
        margin-left: 20px; 
      } 
      header #login{ 
        display: inline-block; 
        float: right; 
        margin-right: 150px; 
        margin-top: 15px; 
      } 
      .form-group{ 
        overflow: hidden;
        margin-top: 15px; 
      }
    </style>
  </head>
  
  <body>
    <header>
      <span align="left">欢迎进入分享式民宿酒店预订系统</span>
      <div id="login">
        <button class="btn btn-success btn-xm" data-toggle="modal" type="button" data-target="#registerModal">注册</button>
        <button class="btn btn-success btn-xm" data-toggle="modal" type="button" data-target="#loginModal">登录</button></div>
    </header>
    <div id="myCarousel" class="carousel slide">
      <!-- 轮播（Carousel）指标 -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- 轮播（Carousel）项目 -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="image/12.jpg" alt="First slide"></div>
        <div class="item">
          <img src="image/13.jpg" alt="Second slide"></div>
        <div class="item">
          <img src="image/14.jpg" alt="Third slide"></div>
      </div>
      <!-- 轮播（Carousel）导航 -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span></a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span></a>
    </div>
  
    <!-- 注册 -->
    <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">新用户注册</h4></div>
          <div class="modal-body">
              <div class="form-group">
              <label for="username" class="col-sm-2 control-label">用户名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="username" placeholder="请输入用户名"></div>
              </div>
              <div class="form-group">
                <label for="idNumber" class="col-sm-2 control-label">身份证号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="idNumber" placeholder="请输入身份证号"></div>
              </div>
              <div class="form-group">
                <label for="phoneNumber" class="col-sm-2 control-label">手机</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="phoneNumber" placeholder="请输入手机号"></div>
              </div>
              <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="password" placeholder="请输入密码"></div>
              </div>
              <div class="form-group">
                <label for="repassword" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="repassword" placeholder="确认密码"></div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox"></div>
                </div>
              </div>
              <!-- </div> -->
          </div>
          <div class="modal-footer">
            <button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-success" id="registeruser">立即注册</button>        
          </div>
        </div>
      </div>
    </div>
    
    <!-- 登录 -->
        <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户登录</h4></div>
              <div class="modal-body">

              <div class="form-group">
                <label for="loginphonenumber" class="col-sm-2 control-label">手机</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="loginphonenumber" placeholder="请输入登陆手机号"></div>
              </div>

              <div class="form-group">
                <label for="loginPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="loginPassword" placeholder="请输入登陆密码"></div>
              </div>
              
              


              </div>         
              <div class="modal-footer">
                <button class="btn btn-success btn-xm" type="button" id="orderhouse">预定房间</button>
                <button class="btn btn-success btn-xm" type="button" id="publishhouse">发布房源</button>
              </div>
          </div>
          </div>
        </div>
        <script type="text/javascript">
          (function(){
            var checkphoneNumber = new RegExp("^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\\d{8}$")
            var checkidNumber = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            $("#registeruser").click(function(){
              var username = $("#username").val()
              var idNumber = $("#idNumber").val()
              var phoneNumber = $("#phoneNumber").val()
              var password = $("#password").val()
              var repassword = $("#repassword").val()
              
              if(!username||!idNumber||!phoneNumber||!password||!repassword){
                alert("数据不能为空！")
              }else if(!checkidNumber.test(idNumber)){
                alert("身份证格式错误！")
              }else if(!checkphoneNumber.test(phoneNumber)){
                alert("手机号格式错误！")
              }else if(password != repassword){
                alert("两次密码输入不一致")
              }else{
                var requestArgs = {
                      name:username,
                      phoneNumber:phoneNumber,
                      idCard:idNumber,
                      password:password
                  };
                  $.get("/user/register",requestArgs,function (data) {
                    if(data.code ==1){
                          $("#registerModal").modal("hide")
                          alert("注册成功")
                          $("#loginModal").modal("show")
                    }else{
                        alert(data.data)
                    }
                  })
                  }
            })
            
            $("#orderhouse").click(function(){
              var loginphonenumber = $("#loginphonenumber").val()
              var loginPassword = $("#loginPassword").val()

              if(!loginphonenumber||!loginPassword){
                alert("数据不能为空！")
              }else if(!checkphoneNumber.test(loginphonenumber)){
                alert("手机号格式错误")
              }else{
                // alert("验证成功")
                var requestArgs = {
                      phoneNumber:loginphonenumber,
                      password: loginPassword
                  };
                $.get("/user/login", requestArgs, function(data){
                  if(data.code == 1){
                    $("#loginModal").modal("hide")
                      // console.log(data.data)
                      localStorage.setItem('userId', data.data.keyId)
                      window.location.href='housingList.html'
                    } else{
                      alert(data.data)
                  }
                })
                
            }
          })
            $("#publishhouse").click(function(){
              var loginphonenumber = $("#loginphonenumber").val()
              var loginPassword = $("#loginPassword").val()

              if(!loginphonenumber||!loginPassword){
                alert("数据不能为空！")
              }else if(!checkphoneNumber.test(loginphonenumber)){
                alert("手机号格式错误")
              }else{
                // alert("验证成功")
                var requestArgs = {
                      phoneNumber:loginphonenumber,
                      password: loginPassword
                  };
                $.get("/user/login", requestArgs, function(data){


                  if(data.code == 1){
                    $("#loginModal").modal("hide");
                      localStorage.setItem('userId', data.data.keyId);
                      window.location.href='publish.html';
                    } else{
                      alert(data.data);
                    }
                })
            }
          })
         })()
        </script>

  </body>

</html>